<template>
  <div>
    <!-- 1. v-text 替换标签内的内容  innerText-->
    <div v-text="name"></div>
    <!-- 2. v-html 替换标签内的内容  innerHtml-->
    <div v-html="name"></div>
    <!-- 3.属性绑定 v-bind:属性名=""  :属性名="" 单向数据绑定 -->
    <img :src="imgUrl" alt="" width="200px" height="150px">
    <!-- 4. 事件绑定 v-on:事件名="方法名"  @事件名=""-->
    <!-- <button @click="login(123)">点击</button> -->
    <!-- 5.条件渲染  0.1 v-show  通过操作css属性display来控制是否隐藏或者显示  -->
    <!-- <div v-show="nameShow">乔丹</div> -->
    <!-- 0.2 v-if 1.通过操作dom也就是节点 来控制是否隐藏和显示
      2.做判断  v-else-if v-else(必须先写v-if，没有v-if直接写v-else-if v-else会报错)
    -->
    <!-- <div v-if="nameShow">乔丹</div> -->
    <div v-if="status == 1">待付款</div>
    <div v-else-if="status == 2">待发货</div>
    <div v-else>待收货</div>
    <!-- 6. 循环渲染  v-for="(item,i) in 数组名" :key="i"
      循环完成之后里面取值时候item.属性名,i是下标
    -->
    <!-- <div v-for="(item,i) in arr" :key="i">
      <div>{{ i }}</div>
      <img :src="item.img" alt="">
      <div>{{ item }}</div>
      <div>{{ item.price }}</div>
      <div>{{ item.content }}</div>
    </div> -->
    <!-- 7.双向数据绑定（一般用作表单） v-model-->
    用户名：<input type="text" v-model="value.username">
    密码：<input type="password" v-model="value.password">
    <button @click="login()">点击</button>
    <!-- <input type="text" :value="val"> -->
    <!-- <div v-model="val"></div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      name:"<h1>黄连宏</h1>",
      // 图片路径如果在data中而且使用的是本地路径，需要加require(路径)
      // imgUrl: require("../assets/logo.png") 
      nameShow:false,
      status:0,
      imgUrl:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340",
      arr:[
        {
          img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=225&h=225&f=webp&q=90",
          title:"Redmi Turbo 3",
          price:"1999",
          content:" 性能旋风，席卷而来"
        },
        {
          img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=225&h=225&f=webp&q=90",
          title:"Redmi Turbo 3",
          price:"2999",
          content:" 性能旋风，席卷而来"
        },
        {
          img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=225&h=225&f=webp&q=90",
          title:"Redmi Turbo 3",
          price:"3999",
          content:" 性能旋风，席卷而来"
        },
        {
          img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=225&h=225&f=webp&q=90",
          title:"Redmi Turbo 3",
          price:"4999",
          content:" 性能旋风，席卷而来"
        },
      ],
      value:{
        username:"",
        password:""
      }
    }
  },
  // 在vue2中，methods中写的是自定义方法  methods:{}
  methods:{
    login(){
      // 如果方法中需要使用data中的变量，需要先this.变量名
      // 如果一个方法想调用另一个方法，同样使用this.方法名()
      // 方法名跟data中的变量名不能重复
     console.log(this.value);
    },
    // res(){
    //   this.login()
    // },
    // three(){

    // }
  }
}
</script>

<style>

</style>